<template>
	<view class="container">
		<view class="record_main">
			<view class="record_item" v-for="item in recordList" :key="item.id">
				<view class="item_peice">
					<view class="label">提现时间：</view>
					<view class="desc">{{item.time}}</view>
					<view
						:class="[
							'status',
							item.withdrawStatus.status == '1'? 'success': 'fail'
						]"
					>{{item.withdrawStatus.desc}}</view>
				</view>
				<view class="item_peice">
					<view class="label">提现金额：</view>
					<view class="money">￥{{item.money}}</view>
				</view>
				<view class="item_peice" v-if="item.withdrawStatus.status == '1'">
					<view class="label">处理时间：</view>
					<view class="desc">￥{{item.handleTime}}</view>
				</view>
				<view class="item_peice" v-else>
					<view class="label">失败原因：</view>
					<view class="desc">{{item.withdrawStatus.reason}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [
					{
						id: 1,
						time: '2021年12月25日 15:57',
						money: 0.01,
						handleTime: '2021年12月25日 15:57',
						withdrawStatus: {
							status: '1',
							desc: '提现成功',
							reason: ''
						}
					},
					{
						id: 2,
						time: '2021年12月25日 15:57',
						money: 0.01,
						handleTime: '2021年12月25日 15:57',
						withdrawStatus: {
							status: '2',
							desc: '提现失败',
							reason: '系统金额核算，提现金额已退回'
						}
						
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		
		.record_main{
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			
			.record_item{
				width: 100%;
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				
				.item_peice{
					display: flex;
					align-items: center;
					padding: 10rpx 0;
					position: relative;
					
					.label{
						color: #0B1526;
						font-size: 28rpx;
					}
					
					.desc{
						color: #B1B4C3;
						font-size: 28rpx;
					}
					.money{
						color: #FF0000;
						font-size: 28rpx;
					}
					.status{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-size: 28rpx;
					}
					.success{
						color: #07AD18;
					}
					.fail{
						color: #ED5259;
					}
				}
			}
		}
	}
</style>
